<template>
  <div class="vant2_body">
    <m-header modile-title="Vant反馈组件" go-back="true"></m-header>
    <div class="vant2_main">
      <!--弹窗部分-->
     <div>
       <!--底部弹出菜单-->
       <button @click="bottomSheet">底部弹出菜单</button>
       <van-action-sheet v-model="sheetShow" :close-on-click-overlay="overlayClose" description="请谨慎选择" cancel-text="取消" :actions="actions" @select="onSelect"></van-action-sheet>
       <!--弹出框-->
       <button @click="openDialog">弹出框</button>
     </div>

      <!--下拉菜单-->
      <div class="drop-down">
        <van-dropdown-menu>
          <van-dropdown-item :value="menuValue" :options="menuData"></van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>
  </div>
</template>

<script>
  import mHeader from '../../../components/header'
  import {Toast, Dialog} from 'vant'
    export default {
        name: "Vant2",
        data(){
          return {
            sheetShow: false, // 控制底部弹出菜单是否显示
            overlayClose: false, // 点击遮罩层是否关闭
            actions: [
              {name: '同意'},
              {name: '反对', subname: '描述信息'},
            ], // 上拉菜单数据
            menuData:[
              {text: '全部商品', value:0},
              {text: '新款商品', value:1},
              {text: '活动商品', value:2}
            ],
            menuValue:0
          }
        },
        mounted(){
        },
        created(){
        },
        methods:{
          // 上拉菜单点击事件
          bottomSheet() {
            this.sheetShow = true
          },
          onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.sheetShow = false;
            Toast(item.name);
          },

          // 弹出框事件
          openDialog(){
            // Dialog.alert({
            //   title: '标题',
            //   message: '弹窗内容'
            // }).then(() => {
            //   // on close
            // });
            Dialog.confirm({
              title: '标题',
              message: '弹窗内容',
            }).then((res) => {
              // confirm
              console.log(res)
            }).catch((ret)=>{
              // cancel
              console.log(ret)
            })
          },
        },
        components:{
          mHeader
        }
    }
</script>

<style lang="scss" scoped>
.vant2_body{
  padding: 60px 0 20em 0;
  .vant2_main{

  }
}
</style>
